<template>
  <div class="mine">
    <!-- 上部分得外盒子 -->
    <div class="profile">
      <!-- 左边盒子头像部分 -->
      <van-image fit="cover" round :src="userInfo.photo" />
      <!-- 右边盒子info部分 -->
      <div class="info">
        <h4>{{ userInfo.name }}</h4>
        <span>{{ userInfo.birthday }}</span>
      </div>
    </div>
    <!-- 中间部分快捷功能区域 -->
    <van-row>
      <van-col span="8">
        <van-icon name="newspaper-o" />
        <span>我的作品</span>
      </van-col>
      <van-col span="8">
        <van-icon name="star-o" />
        <span>我的收藏</span>
      </van-col>
      <van-col span="8">
        <van-icon name="tosend" />
        <span>历史阅读</span>
      </van-col>
    </van-row>
    <!-- 下部分得内容 -->
    <van-cell-group>
      <van-cell to="/mine/edit" title="编辑资料" icon="edit" is-link />
      <van-cell to="/mine/chat" title="小智同学" icon="chat-o" is-link />
      <van-cell title="系统设置" icon="setting-o" is-link />
      <van-cell @click="loginout" title="退出登录" icon="info-o" is-link />
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    loginout() {
      //设置退出功能（删除vuex里的tokenobj以及localstore里的tokenobj）
      this.$store.commit("loginout");
      // 轻提示
      this.$toast.success("退出成功");
      this.$router.push("/login");
    },
  },
  created() {
    //    调用vuex对象中获取数据的函数获取用户信息
    this.$store.dispatch("getUserInfo");
  },
  computed: {
    // 数据变了它也会跟着变，所以在计算机属性里返回vuex数据，那这个计算属性就相当于直接访问vuex
    userInfo() {
      return this.$store.state.userInfo;
    },
  },
};
</script>

<style lang='less' scoped>
.mine {
  @bgColor: #3296fa;
  //   上部分得样式
  .profile {
    height: 160px;
    background-color: @bgColor;
    display: flex;
    align-items: center;
    // 头像样式
    .van-image {
      width: 100px;
      height: 100px;
      margin-left: 20px;
      margin-right: 10px;
    }
    // 右边文字样式
    .info {
      h4 {
        font-size: 16px;
        color: #fff;
        margin-bottom: 5px;
      }
      span {
        color: @bgColor;
        padding: 3px;
        background-color: #fff;
      }
    }
  }
  //   快捷功能区域得样式
  .van-row {
    .van-col {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 80px;
      &:first-child .van-icon {
        color: @bgColor;
      }
      &:nth-child(2) .van-icon {
        color: #f00;
      }
      &:last-child .van-icon {
        color: #ffaf6b;
      }

      .van-icon {
        font-size: 30px;
        margin-bottom: 3px;
      }
    }
  }
}
</style>